<template>
    <div class="default-sidebar" :class="{ 'collapsed': isCollapsed }">
        <div class="user-info">
            <div class="user-avatar" @mouseenter="showDropdown = true" >
                <img src="https://www.keaitupian.cn/cjpic/frombd/2/253/3498215567/1247959937.jpg" alt="">
            </div>
            <div class="user-name">小熊</div>

            <!-- 添加浮窗 -->
            <div v-show="showDropdown" class="logout-popup" @mouseleave="showDropdown = false">
                <div class="logout-btn" @click="handleLogout">退出登录</div>
            </div>
        </div>

        <div class="main-btn">
            <div to="/" class="link-btn">
                <div :class="{ 'active': tab == 1 }" @click="clickBtn(1)">
                    <i class="iconfont  icon-shouye"></i>
                    <svg-icon iconName="icon-shouye"></svg-icon>
                    <span v-if="!isCollapsed">首页</span>
                </div>
            </div>
            <div to="/video" class="link-btn" v-if="isVideo == 1">
                <div :class="{ 'active': tab == 2 }" @click="clickBtn(2)">
                    <svg-icon iconName="icon-luzhishipin"></svg-icon>
                    <span v-if="!isCollapsed">视频面试</span>
                </div>
            </div>
            <div class="link-btn" @click.prevent="handleVideoClick" v-else>
                <div class="disabled">
                    <svg-icon iconName="icon-luzhishipin"></svg-icon>
                    <span v-if="!isCollapsed">视频面试</span>
                </div>
            </div>
            <!-- <div to="/person" class="link-btn">
                <div :class="{ 'active': tab == 3 }" @click="clickBtn(3)">
                    <svg-icon iconName="icon-yonghu"></svg-icon>
                    <span v-if="!isCollapsed">个人中心</span>
                </div>
            </div> -->
        </div>
        <div class="collapse-btn">
            <!-- <a-button type="primary" @click="isCollapsed = !isCollapsed">
                    <right-outlined v-if="isCollapsed" />
                    <left-outlined v-else />
                </a-button> -->
        </div>

        <a-modal v-model:open="showNotStartModal" title="提示" @ok="showNotStartModal = false" okText="确定"
            :cancelButtonProps="{ style: { display: 'none' } }">
            <p>面试还未开始，请耐心等待</p>
        </a-modal>

        <a-modal v-model:open="showEndedModal" title="提示" @ok="showEndedModal = false" okText="确定"
            :cancelButtonProps="{ style: { display: 'none' } }">
            <p>面试已结束，请耐心等待结果</p>
        </a-modal>
    </div>

</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()


// 0代表还未开始面试，1代表面试开始了，2代表面试结束了
let isVideo = ref(1)
onMounted(() => {
    // 发起请求获取面试是否开始了
})
const isCollapsed = ref(true)
let tab = ref(1)
const showNotStartModal = ref(false)
const showEndedModal = ref(false)
const showDropdown = ref(false)

// const videoPage = ref()
function clickBtn(val: number) {
    if (val == 1) {
        router.push('/')
    } else if (val == 2) {
        router.push('/video')
    } else if (val == 3) {
        router.push('/person')
    }
    tab.value = val
}
function handleVideoClick() {
    if (isVideo.value == 0) {
        tab.value = 1
        showNotStartModal.value = true
    } else if (isVideo.value == 2) {
        tab.value = 1
        showEndedModal.value = true
    }
}
function handleLogout() {
    sessionStorage.removeItem('token')
    router.push('/login')
}
//监听路由变化
watch(
    () => route.path,
    (newPath: string) => {
        if (newPath === '/') {
            tab.value = 1
        } else if (newPath === '/video') {
            tab.value = 2
        } else if (newPath === '/person') {
            tab.value = 3
        }
    },
    { immediate: true } // 立即执行一次
)

</script>

<style scoped lang="scss">
.default-sidebar {
    color: #fff;
    min-width: 50px;
    width: 10%;
    height: 100%;
    border-radius: 10px 0 0 10px;
    border-right: 3px solid rgba(53, 62, 72, 1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    .user-info {
        position: relative;
        .user-avatar {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 20px;
            width: 45px;
            height: 45px;
            border-radius: 50%;
            overflow: hidden;
            

            img {
                width: 45px;
                height: 45px;
            }
        }

        .user-name {
            margin-top: 5px;
            font-size: 14px;
            width: 45px;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* 只添加浮窗相关样式，不修改原有样式 */
        .logout-popup {
            position: absolute;
            top: 45px;
            right: -90px;
            background-color: #2d2d2d;
            padding: 8px;
            border-radius: 4px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
            z-index: 1000;
        }

        .logout-btn {
            color: #e0e0e0;
            padding: 6px 12px;
            cursor: pointer;
            font-size: 14px;
            white-space: nowrap;
        }

        .logout-btn:hover {
            background-color: #404040;
            border-radius: 2px;
        }
    }



    .main-btn {
        display: inline-block;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .link-btn {
            text-decoration: none;
            color: rgba(117, 129, 143, 1);
        }

        .link-btn>div {
            margin-bottom: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .link-btn>div>span {
            font-size: 13px;
            padding: 0 5px;
        }

        .disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .active {
            height: 40px;
            width: 40px;
            border-radius: 10px;
            background-image: linear-gradient(315deg, #6772FF 0, #00F9E5 100%);
        }

        .active>i {
            color: #fff;
        }
    }

    .collapse-btn {
        height: 10%;
    }
}

.default-sidebar.collapsed {
    width: 4%;
}
</style>